<template>
	<view class="container">
		<view class="header">
			<!-- <image src="../../../static/luanchaoai.jpg" mode="widthFix"></image> -->
			<view class="header_title">{{ data.name }}</view>
			<view class="header_title2">{{ data.name_en }}</view>
		</view>
		<view class="sroll">
			<u-tabs :list="list1" @click="click" lineColor="#FEC345" lineWidth="56rpx" :activeStyle="{ color: '#000000' }" :inactiveStyle="{ color: '#C4C4C4' }"></u-tabs>
		</view>
		<view class="info">
			<view class="info_title">{{ listitem.name }}</view>
			<view class="frame_bottom"><view v-html="showInfo[0].content ? showInfo[0].content : '暂无介绍'"></view></view>
		</view>

		<view class="about_us_btn">
			<button open-type="contact" size="mini" style="padding: 0;margin:0;border-radius: 10rpx;"><view class="btn">哪种治疗适合您？</view></button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			data: {},
			datainfo: [],
			list1: [
				{
					name: '基本信息'
				},
				{
					name: '危险因素'
				},
				{
					name: '防范措施'
				},
				{
					name: '早期症状'
				},
				{
					name: '如何筛选'
				}
			],
			showInfo: [],
			listitem: {
				name: '基本信息'
			}
		};
	},
	onLoad(options) {
		this.data = JSON.parse(options.item);
		this.getdata();
	},
	methods: {
		getdata() {
			this.get('/api/Zrecduzp/zhidingiddexiangqing', {
				id: this.data.id
			}).then(res => {
				this.datainfo = res;
				this.showInfo.push(this.datainfo[0]);
			});
		},
		click(val) {
			console.log(val, '看一下');
			this.listitem = val;
			this.showInfo = this.datainfo.filter(item => {
				return item.name == val.name;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// <style lang="scss" scoped>
// .data-v-23cbca40 image{ width: 100%!important;}

.container {
	width: 100%;
	height: 100%;
}

.header {
	width: 100%;
	height: 300rpx;
	position: relative;

	.header_title {
		font-size: 40rpx;
		font-weight: bold;
		color: #ffffff;
		position: absolute;
		top: 80rpx;
		left: 40rpx;
	}

	.header_title2 {
		font-size: 40rpx;
		font-weight: bold;
		color: #ffffff;
		position: absolute;
		top: 140rpx;
		left: 40rpx;
	}
}

.header image {
	width: 100%;
	height: 300rpx;
}

.sroll {
	width: 100%;
	height: 60rpx;
}

.info {
	width: 590rpx;
	height: 852rpx;
	margin: 40rpx auto;
	margin-bottom: 200rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	padding: 40rpx;

	.info_title {
		width: 100%;
		height: 42rpx;
		font-size: 32rpx;
		line-height: 42rpx;
		color: #000000;
	}
	.frame_bottom {
		width: 570rpx;
		height: 780rpx;
		margin-top: 50rpx;
		overflow-y: scroll;
		font-size: 24rpx;
		color: #424f5e;
		line-height: 34rpx;
	}
}

.about_us_btn {
	width: 750rpx;
	height: 160rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	.btn {
		width: 670rpx;
		height: 90rpx;
		background: #5f5af7;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
}
</style>
